<template>
	<div class="jobOrderBack">
		<p class="reportTitle">
			<img src="../../assets/img/file5.png" />
			<span>派工单</span>
		</p>
		<div class="outItem">
			<mt-navbar v-model="selected">
				<mt-tab-item id="1"><span class="icon el-icon-postcard"></span>基本信息</mt-tab-item>
				<mt-tab-item id="2">
					<span class="icon iconfont icon-circulation"></span>
					<el-badge :value="0" class="item" type="warning">
						制程信息
					</el-badge>
				</mt-tab-item>
				<mt-tab-item id="3">
					<span class="icon iconfont icon-sop_tap_show"></span>
					<el-badge :value="0" class="item" type="warning">
						SOP
					</el-badge>
				</mt-tab-item>
				<mt-tab-item id="4">
					<span class="icon iconfont icon-yichangliebiao"></span>
					<el-badge :value="0" class="item" type="warning">
						异常列表
					</el-badge>
				</mt-tab-item>
				<mt-tab-item id="5">
					<span class="icon iconfont icon-wenjian"></span>
					<el-badge :value="0" class="item" type="warning">
						缺料列表
					</el-badge>
				</mt-tab-item>
				<mt-tab-item id="6">
					<span class="icon iconfont icon-biji"></span>
					<el-badge :value="0" class="item" type="warning">
						检验列表
					</el-badge>
				</mt-tab-item>
				<mt-tab-item id="7">
					<span class="icon iconfont icon-weixiuliebiao"></span>
					<el-badge :value="0" class="item" type="warning">
						维修列表
					</el-badge>
				</mt-tab-item>
			</mt-navbar>
		</div>
		<mt-tab-container v-model="selected">
			<mt-tab-container-item id="1">
				<div class="mui-card">
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							<p id="num">
								<span>派工单号</span>
								<span style="color: #242424;font-weight: bold;">cll71130</span>
							</p>
							<p>
								<span>订单编号</span>
								<span>htt</span>
							</p>
							<p>
								<span>客户名称</span>
								<span>htt</span>
							</p>
							<p>
								<span>产品名称</span>
								<span>材料171130</span>
							</p>
							<p>
								<span>工单编号</span>
								<span>BA20171202001013</span>
							</p>
							<p>
								<span>订单交期</span>
								<span>2019-8-1</span>
							</p>
							<p>
								<span>投产日期</span>
								<span>2019-8-1</span>
							</p>
							<p>
								<span>订单数量</span>
								<span>0</span>
							</p>
							<p>
								<span>投产数量</span>
								<span>0</span>
							</p>
							<p>
								<span>报废数量</span>
								<span>0</span>
							</p>
							<p>
								<span>完工状态</span>
								<span>0</span>
							</p>
							<p>
								<span>当前工位</span>
								<span>23</span>
							</p>
							<p>
								<span>投产状态</span>
								<span>未投产</span>
							</p>
						</div>
					</div>
				</div>
			</mt-tab-container-item>
			<mt-tab-container-item id="2">
			</mt-tab-container-item>
		</mt-tab-container>
		<div style="display: flex; margin-top: 20px; height: 100px;">
			<transition name="el-fade-in">
				<div ref='right' @click="goWorkstation" v-show="rightFlag">
					<img src="../../assets/img/right.png" class="right" />
				</div>
			</transition>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				selected:'1',
				rightFlag:true,
			}
		},
		created() {
			setInterval(()=>{
				if(this.rightFlag === true){
					this.rightFlag = false
				}else{
					this.rightFlag = true
				}
			},3000)
		},
		methods:{
			goWorkstation(){
				this.$router.push({name:'workstation'})
			}
		}
	}
</script>

<style scoped="scoped">
	.mint-navbar {
		background: #f4f4f5;
		width: 100%;
		height: 3.5rem;
		overflow-x: scroll;
		white-space: nowrap;
	}
	
	.mint-navbar .mint-tab-item {
		margin-left: 26px;
		dispaly: inline-block;
	}
	.outItem{
		overflow: hidden;
	}
	.mint-navbar .mint-tab-item.is-selected {
		margin-bottom: -1px;
	}
	.right{
		position: fixed;
		bottom: 235px;
		right: 0px;
	}
	#num{
		font-size: 17px;
		padding-bottom: 19px;
		border-bottom: 1px solid #EEEEEE;
	}
	.mui-card p{
		display: flex;
		justify-content: space-between;
		font-size: 15px;
		margin-bottom: 14px;
	}
	.mui-card{
		box-shadow:0px 6px 8px #cdcdcd;
	}
	.icon {
		margin-right: 7px;
	}
	
	.mint-navbar .mint-tab-item.is-selected {
		border-bottom: 2px solid #26a2ff;
	}
	
	
	.mint-tab-container {
		margin-top: 17px;
	}
	.reportTitle{
		height: 40px;
		text-align: center;
		line-height: 40px;
		background: white;
		font-size: 16px;
		margin-top: 52px;
	}
	img{
		vertical-align: middle;
		margin-right: 5px;
	}
</style>
